<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.tubeonfire.entity.Playlist"%>
<%@page import="java.util.TreeMap"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 	
	String action = (String)session.getAttribute("action");
	Playlist pl = (Playlist)session.getAttribute("pl");	
	if(pl==null){
		pl = new Playlist();
	}
	TreeMap check = (TreeMap)session.getAttribute("check");
	session.removeAttribute("check");
	if(check==null){
		check = new TreeMap();
	}
%>
<jsp:include page="/admin/elements/header.jsp">
	<jsp:param value="Playlist Form" name="title"/>
</jsp:include>
<script type="text/javascript">
	jQuery(document).ready(function() { 		
		jQuery("#btnSubmit").click(function(){	
			showAjaxEffect();				
			onSubmitForm("<%=action%>");
			return false;
		}); 
		jQuery('#btnDelete').click(function(){			
			var title = jQuery(this).attr("rel");
			var c = confirm('Are you sure want to delete \"' + title + '\" playlist ?');
			if(c) {
				showAjaxEffect();
				var id = jQuery(this).attr("href");				
				jQuery.get("/admin/playlist/process", {id: id, action: "delete"}, function(data) {				
					hideAjaxEffect();
					scrollToTop();
					if(data==''){			
						jQuery('#messageDiv').fadeIn();
						jQuery('#messageDiv').addClass('msgsuccess').removeClass('hidden');
						jQuery('#messageDiv > p').html('Action success ! Playlist has been deleted. Redirecting...');
						setTimeout(function() {							
							window.location.href = '/admin/playlist/list';
						}, 2000);	
					}else{
						jQuery('#messageDiv').fadeIn();
						jQuery('#messageDiv').addClass('msgerror').removeClass('hidden');
						jQuery('#messageDiv > p').html(data);
						setTimeout(function() {
							jQuery('#messageDiv').fadeOut();
						}, 2000);	
					}	
				});					
			}
			return false;
		});
	});    	
	function onSubmitForm(action){    		
    	jQuery.get("/admin/upload/get-url?returnUrl=" + "/admin/playlist/" + action, function(data){        		
    		jQuery("#categoryForm").attr("action", data);      		
    		jQuery("#categoryForm").submit();    		
    	});        	
    }
</script>

	<body class="loggedin">
		<jsp:include page="/admin/elements/top.jsp"/>
	    <!-- START OF MAIN CONTENT -->
	    <div class="mainwrapper">
	     	<div class="mainwrapperinner">         	        
				<jsp:include page="/admin/elements/left.jsp">
					<jsp:param value="playlist" name="current_page"/>
				</jsp:include>					              	                   
	        	<div class="maincontent noright">
	        		<div class="maincontentinner">	            	
		                <ul class="maintabmenu">
		                	<li><a href="/admin/playlist/list">Manage Playlist</a></li>
		                	<li class="current"><a href="#">
		                		<%
	                				if(action!=null&&action.equals("add")){
	                					%>
	                					New Playlist
	                					<%
	                				}else if(action!=null&&action.equals("edit")){
	                					%>
	                					Edit Playlist
	                					<%
	                				}
                				%>    
                			</a></li>
		                </ul><!--maintabmenu-->	                
	                	<div class="content">	
	                	<jsp:include page="/admin/elements/message.jsp"/>
	                	<div id="messageDiv" class="notification hidden">						   
						    <p></p>
						</div>	   	                    
	                    	<div class="contenttitle">
	                    		<h2 class="image"><span>Fill Playlist Information</span></h2>
	                    	</div>
	                    	<br />
		                    <form class="stdform" enctype="multipart/form-data"  action="" method="post" id="categoryForm">
		                    <%
		                    	if(action.equals("edit")){
		                    		%>
		                    		<input type="hidden" name="id" value="<%=pl.getId()%>">
		                    		<%
		                    	}
		                    %>                    	
		                        <p>
		                        	<label>Title</label>
		                            <span class="field">
		                            	<input type="text" name="title" class="smallinput" value="<%=pl.getTitle()%>"/>
		                            	<% if (check.get("title") != null) { %>
											<label for="title" class="error"><%=check.get("title") %></label>
										<% } %>
		                            </span>		                            		                           
		                        </p>                                                                      
		                        <p>
		                        	<label>Description</label>
		                            <span class="field">
		                            	<textarea cols="80" rows="5" class="longinput" name="description"><%=pl.getDescription()%></textarea>		                            
			                            <% if (check.get("description") != null) { %>
											<label for="description" class="error"><%=check.get("description") %></label>
										<% } %> 
									</span>
									<small class="desc">Small description of this playlist.</small>
		                        </p>    		                                         
		                        <p>
		                        	<label>Cover Image</label>
		                            <span class="field">
		                            	<input type="file" name="image" class="smallinput">
		                            	<% if (check.get("image") != null) { %>
											<label for="image" class="error"><%=check.get("image") %></label>
										<% } %>
										<br/><br/>
										<%
											String imgUrl = pl.getImageKey();
											if (!imgUrl.contains("http://")) {
												imgUrl = "/image?key=" + imgUrl + "&size=250";
											}				                           
				                           %>
				                            <img src="<%=imgUrl %>=s250" alt="" style="max-width: 250px; max-height: 150px"/>				                          	   
		                            </span> 
		                        </p>                                                                                                                                          
                        		<br clear="all" />                  
		                        <p class="stdformbutton">
		                        	<button class="submit radius2" id="btnSubmit">Submit</button>
		                            <input type="reset" class="reset radius2" value="Reset" />		                            
		                            <%
		                            	if(action!=null&&action.equals("edit")){
		                            %>
		                            <span style="padding-left: 30px">		                            	
		                         		<a href="/admin/tube/list?playlistId=<%=pl.getId() %>" id="btnBanner" class="btn btn_tubes" title="View tubes of this playlist"><span>View Tubes</span></a>&nbsp;&nbsp;
		                         		<a href="<%=pl.getId() %>" id="btnDelete" class="btn btn_trash" title="Delete this playlist" rel="<%=pl.getTitle()%>"><span>Delete</span></a>
		                            </span>
		                            <%
		                            	}
		                            %>		
		                        </p>                                                
                    		</form>             
	                    <br /><br />	                    
	                </div><!--content-->	                
	            </div><!--maincontentinner-->
				<jsp:include page="/admin/elements/bottom.jsp"></jsp:include>                    	           	
	        </div><!--maincontent-->	                        
	     	</div><!--mainwrapperinner-->
	    </div><!--mainwrapper-->
		<!-- END OF MAIN CONTENT -->    
		<div id="opacity"></div>
		<img id="image_loadder" src="/admin/images/ajax-loader.gif">  
	</body>
</html>
